<template>
  <div class="com-full it-zy">
    <div class="chart">
      <Echarts :options="option" />
      <div class="text com-full">
        <div class="value">{{ allNum }}</div>
        <div class="label">工单总数</div>
      </div>
    </div>
    <div class="legend">
      <div class="item" v-for="(item, i) of list" :key="i">
        <div class="dot" :style="{ '--c': item.color }"></div>
        <div class="label">{{ item.label }}</div>
        <div class="data">{{ item.data }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Echarts from "@/components/Echarts/Echarts.vue";
import { getOptions } from "@/utils/options/getPieOption.js";
import { onMounted, ref, computed, watch, onUnmounted } from "vue";
import { useParamsStore } from "@/stores/params.js";
import api from "@/api";
import bus from "@/utils/bus.js";
import { getOpt } from "../../../../options/MockData";

const paramsStore = useParamsStore();
const param = computed(() => paramsStore.param);
const option = ref({});
const list = ref([]);
const allNum = computed(() => {
  let num = 0;
  list.value.map((item) => {
    num += item.data;
  });
  return num;
});
const init = async () => {
  if (isMockData) {
    const mockdata = await getOpt(param.value.ueId);
    list.value = [
      {
        label: "强制归档",
        color: "#B04F47",
        data: getRandon(mockdata["v19"].min, mockdata["v19"].max),
      },
      {
        label: "归档",
        color: "#D0A14C",
        data: getRandon(mockdata["v16"].min, mockdata["v16"].max),
      },
      {
        label: "运营中",
        color: "#81B1F4",
        data: getRandon(mockdata["v18"].min, mockdata["v18"].max),
      },
      {
        label: "作废",
        color: "#C9CACA",
        data: getRandon(mockdata["v17"].min, mockdata["v17"].max),
      },
    ];
  } else {
    try {
      const { data } = await api.workOrderStics(param.value);
      list.value = [
        { label: "强制归档", color: "#B04F47", data: data.state4 },
        { label: "归档", color: "#D0A14C", data: data.state2 },
        { label: "运营中", color: "#81B1F4", data: data.state1 },
        { label: "作废", color: "#C9CACA", data: data.state3 },
      ];
    } catch (error) {
      console.log(error);
    }
  }
  option.value = getOptions(list.value);
};
//取随机数
const getRandon = (min, max) => {
  if (min === max) {
    return max;
  }
  if (min === 0 && max === 0) {
    return 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
let isMockData = true;
onMounted(() => {
  bus.on("useMock", (e) => {
    isMockData = e;
    init();
  });
});
onUnmounted(() => {
  bus.off("useMock", (e) => {
    isMockData = e;
    init();
  });
});
watch(
  () => param.value,
  () => {
    init();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.it-zy {
  display: flex;
  flex-direction: column;

  .chart {
    flex: 1;
    position: relative;

    .text {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;

      .label {
        color: #fff;
        font-size: 28px;
        margin-bottom: 5px;
      }

      .value {
        color: #fff;
        font-size: 35px;
      }
    }

    &::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 5%;
      width: 90%;
      height: 2px;
      background-image: linear-gradient(to right, transparent, #b5b9b9, transparent);
    }
  }

  .legend {
    height: 30%;
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
    margin-left: 15px;
    margin: 0 5%;

    .item {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--c);
      }

      .label {
        font-size: 24px;
        margin: 0 0 0 10px;
      }

      .data {
        font-size: 24px;
        font-weight: 500;
        flex: 1;
        overflow: hidden;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
      }
    }
  }
}
</style>
